<template>
    <div class="message-center">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>消息中心</span>
        </div>
        <div class="events-container">
          <h3>接下来一周的赛事和行程</h3>
          <el-table :data="events" style="width: 100%" height="250">
            <el-table-column prop="date" label="日期" width="200">
            </el-table-column>
            <el-table-column prop="detail" label="详情" width="500">
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    name: 'MessageCenter',
    data() {
      return {
        // 赛事和行程数据
        events: [
          { id: 1, date: '2024-06-05', detail: '赛事：校篮球队 VS 教职工队' },
          { id: 2, date: '2024-06-06', detail: '行程：球员体能训练' },
          { id: 3, date: '2024-06-07', detail: '赛事：校内篮球杯小组赛' },
          { id: 4, date: '2024-06-08', detail: '行程：战术讨论会' },
          { id: 5, date: '2024-06-09', detail: '赛事：友谊赛 - 兄弟院校' },
          { id: 6, date: '2024-06-10', detail: '行程：媒体采访安排' },
          // 可以根据需要继续添加更多事件
        ]
      };
    }
  };
  </script>
  
  <style scoped>
  .message-center {
    padding: 20px;
    font-family: 'Arial', sans-serif;
  }
  
  .events-container {
    margin-top: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 10px;
  }
  
  .events-container h3 {
    margin-bottom: 15px;
  }
  
  .el-table {
    margin-top: 10px;
  }
  
  .el-table-column {
    /* 根据需要添加列样式 */
  }
  </style>